<template>
  <div class="box">
    <h1>商品详情</h1>

    <div class="detail_cotent">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input
            disabled
            placeholder="请输入商品名称"
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            disabled
            placeholder="请输入商品描述"
            v-model="form.subtitle"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-input
            disabled
            placeholder="请输入商品描述"
            v-if="!form.status"
            value="已下架"
          ></el-input>
          <el-input
            disabled
            placeholder="请输入商品描述"
            v-else
            value="在售"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.region" placeholder="请选择一级品类">
            <el-option
              v-for="(item, index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option></el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input
            disabled
            class="inp"
            placeholder="价格"
            v-model="form.price"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <!-- stock -->
          <el-input
            disabled
            class="inp"
            placeholder="库存"
            v-model="form.stock"
          >
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img
            class="image"
            v-if="form.mainImage"
            :src="form.imageHost + form.mainImage"
            alt
            srcset
          />
          <!-- 本地可以访问 -->
        </el-form-item>
        <el-form-item label="商品详情">
          <p v-html="form.detail"></p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { deatil, category1 } from "../../../http/http";

export default {
  data() {
    return {
      item: this.$route.params.item,
      form: {},
      region1list: {},
    };
  },
  mounted() {
    console.log(this.item)
    deatil(this.$route.params.data).then((res) => {
      //console.log(res.data.data);

      this.form = res.data.data;
      this.list();
    });
  },
  methods: {
    list() {
      category1().then((res) => {
        this.region1list = res.data.data;
        //console.log(this.region1list);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 80%;
  margin-left: 20%;
}
.card {
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.shops {
  width: 500px;
  height: 20px;
  background-color: white;
  color: #333333;
}
.cards {
  width: 100%;
  height: 100px;
  border: 1px solid grey;
}
</style>